<script>
import UserApi from "../../api/user";

export default {
  data() {
    return {
      userId: -1,
      oldPassword: "",
      newPassword: "",
      newPasswordAgain: "",
      msg: "",
      isDisabled: true,
      inputDisabled: true
    };
  },
  methods: {
    async checkOldPassword() {
      try {
        let data = { password: this.oldPassword };
        const api = new UserApi();
        let res = await api.checkPassword(data);
        if (res.code === 200 && res.data.isEqual === true) {
          this.inputDisabled = false;
          //document.getElementById("new-password").focus();
        } else {
          this.inputDisabled = true;
        }
        this.newPassword = "";
        this.newPasswordAgain = "";
        this.isDisabled = true;
        this.msg = res.msg;
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    },
    async checkNewPassword() {
      if (this.newPassword.length > 0) {
        if (this.newPassword === this.newPasswordAgain) {
          this.isDisabled = false;
        } else {
          this.isDisabled = true;
        }
      }
    },
    async changePassword() {
      try {
        let data = { password: this.newPassword };
        const api = new UserApi();
        let res = await api.changePassword(data);
        if (res.code === 200) {
          this.$myMessageBox(res.msg);
          this.$router.replace({ name: "user-profile" });
        }
      } catch (err) {
        console.error(err);
        this.$myMessageBox("应用服务器访问错误！");
      }
    }
  },
  mounted() {
    this.userId = this.$route.params.id;
  }
};
</script>

<template>
  <div class="user-password-edit">
    <div class="header">
      <h2>密码修改</h2>
      <p>
        <router-link class="button" :to="'/user/change-profile/' + userId"
          >修改个人信息</router-link
        >
        <router-link class="button" :to="'/user/change-password/' + userId">修改密码</router-link>
        <a class="button" href="javascript:void(0);" @click="$goBack">返回</a>
      </p>
    </div>
    <div class="block">
      <p>
        <label for="old-password">原密码</label>
        <input
          type="password"
          id="old-password"
          v-model.trim="oldPassword"
          @blur="checkOldPassword"
          @focus="msg = ''"
        />
        <span>{{ msg }}</span>
      </p>
      <p>
        <label for="new-password">新密码</label>
        <input
          type="password"
          id="new-password"
          v-model.trim="newPassword"
          :disabled="inputDisabled"
        />
      </p>
      <p>
        <label for="new-password-again">确认新密码</label>
        <input
          type="password"
          id="new-password-again"
          v-model.trim="newPasswordAgain"
          @blur="checkNewPassword"
          :disabled="inputDisabled"
        />
      </p>
      <p>
        <button :disabled="isDisabled" @click="changePassword">保存</button>
      </p>
    </div>
  </div>
</template>

<style scoped></style>
